<template>
  <div class="my-set">
    <!-- 顶部导航 -->
    <van-nav-bar title="设置" fixed placeholder @click-left="$router.go(-1)">
      <template #left>
        <van-icon name="arrow-left" />
        <span class="van-icon">返回</span>
      </template>
    </van-nav-bar>
    <div class="mt-10">
      <van-cell-group>
        <van-cell title="账号" :value="phone" />
        <van-cell title="登录密码" is-link value="未设置" />
        <van-cell title="安全密码" is-link value="未设置" />
        <van-cell title="清除缓存" is-link value="立即清除" @click="clearData" />
      </van-cell-group>
    </div>
    <!-- 退出登录 -->
    <div class="logout f16 flex fcc bg-fff fixed w100pc">
      <!-- <p class="red" @click="logout">退出登录</p> -->
      <p class="red" @click="logout2">退出登录</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import $http from '@/utils/request'
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["phone"]),
  },
  methods:{
    logout(){
      $http.post('/user/logout').then(res =>{
        this.$store.commit('SET_PHONE','');
        this.$router.push('/my');
      })
    },
    logout2(){
      this.$store.dispatch('LOGOUT');
      this.$router.push('/my')
    },
    clearData(){
      localStorage.clear()
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: #c03131;
}
.logout {
  bottom: 0;
  height: 50px;
  color: #c03131;
  width: 100%;
}
</style>
